<template>
  <div style="overflow: hidden; height: 105%; z-index: 0;">
    <div class="videoBox">
      <div id="ezuikit-player"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import EZUIKit from 'ezuikit-js'

// 创建播放器方法
const createPlayer = () => {
  console.group('mounted 组件挂载完毕状态===============》')
  
  try {
    const player = new EZUIKit.EZUIKitPlayer({
      id: 'ezuikit-player',
      url: 'ezopen://open.ys7.com/AB9831171/1.hd.live',
      accessToken: 'ra.5re72ai38g4y7gky9ghls5dzb2equqku-491d6ysuja-0bzlevz-5zrd54nns',
      template: 'standard', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版
      autoplay: true,
      // 视频上方头部控件
      header: ['capturePicture', 'save', 'zoom'],
      plugin: ['talk'],
      width: 1870 / 2,
      height: 935 / 2,
      borderRadius: 5,
      // 回调函数
      openSoundCallBack: (data) => console.log('开启声音回调', data),
      closeSoundCallBack: (data) => console.log('关闭声音回调', data),
      startSaveCallBack: (data) => console.log('开始录像回调', data),
      stopSaveCallBack: (data) => console.log('录像回调', data),
      capturePictureCallBack: (data) => console.log('截图成功回调', data),
      fullScreenCallBack: (data) => console.log('全屏回调', data),
      getOSDTimeCallBack: (data) => console.log('获取OSDTime回调', data)
    })

    console.log('player', player)
    return player
  } catch (err) {
    console.error('播放器创建失败:', err)
  }
}

let player = null

// 组件挂载时创建播放器
onMounted(() => {
  player = createPlayer()
})

// 组件卸载时销毁播放器
onUnmounted(() => {
  if (player) {
    try {
      player.destroy()
    } catch (err) {
      console.error('播放器销毁失败:', err)
    }
  }
})
</script>

<style scoped>
.videoBox {
  position: relative;
  top: 2%;
  right: -0.8%;
  width: 98.5%;
  height: 96%;
  overflow: hidden;
  border-radius: 25px;
}
</style>